<template>
	<view>
		<u-navbar back-icon-color="#fff" :is-back="true" :border-bottom="false" title="学生管理" title-color="#fff"
			:title-size="40">
			<!-- 搜索框 学生管理 -->
			<view class="searchView" slot="studentManagement">
				<view @click="show2=true">
					<u-icon name="plus-circle" color="#2979ff" size="28" style="margin-right: 8rpx;"></u-icon>筛选
				</view>
				<u-icon name="reload" color="#2979ff" size="35" :class="refresh?'resetIconRotate':''"
					@click="resetIcon()"></u-icon>
			</view>
		</u-navbar>
		<!-- 学生展示 -->
		<view class="uTable">
			<view>
				<u-icon name="account-fill" color="#958CF9" size="40"></u-icon><text>{{studentTotalNumber}}</text>人
			</view>
			<view class="status-div" :class="checkBoxTrue?'start-animation':'end-animation'">
				<view>
					<u-checkbox v-model="uCheckboxAll" name="qqqq" class="input-checkBox">全选</u-checkbox>
				</view>
				<view>
					<u-button @click="show = true" size="mini" :hair-line="false">
						<u-icon style="margin: 4rpx 5rpx 0 0;" name="plus-circle" color="#606266" size="35">
						</u-icon>状态更改
					</u-button>
					<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
				</view>
				<u-button @click="checkBoxTrue=false" size="mini" :hair-line="false">
					<u-icon style="margin: 4rpx 5rpx 0 0;" name="minus-circle" color="#606266" size="35"></u-icon>关闭
				</u-button>
			</view>
			<u-table>
				<u-tr class="u-tr">
					<u-th class="u-th">序号</u-th>
					<u-th class="u-th">姓名</u-th>
					<u-th class="u-th">手机号</u-th>
					<u-th class="u-th">状态</u-th>
				</u-tr>
				<u-checkbox-group @change="checkboxGroupChange">
					<view v-show="isShowList" v-for="(item,index) in studentList" :key="item.id"
						@longpress="changeStudentStatus(item)">
						<u-tr class="u-tr">
							<u-td class="u-td">
								<view v-show="!checkBoxTrue">{{index+1}}</view>
								<view v-show="checkBoxTrue">
									<u-checkbox v-model="item.isChecked" :name="item.id" class="input-checkBox">
									</u-checkbox>
								</view>
							</u-td>
							<view class="u-td" @click.stop="goStudentDetails($event,item.id)">
								<u-td data-details='tdSecond'>{{item.name}}({{item.classes.title}})
								</u-td>
							</view>
							<view class="u-td" @click.stop="callPhone($event,item.phone)">
								<u-td data-phoneNumber='tdThird'>{{item.phone}}</u-td>
							</view>
							<view class="u-td" @click.stop="goStudentDetails($event,item.id)">
								<u-td>
									<text data-details='tdSecond' v-show="item.status==1">在校</text>
									<text data-details='tdSecond' v-show="item.status==0">休学</text>
									<text data-details='tdSecond' v-show="item.status==-1">退学</text>
									<text data-details='tdSecond' v-show="item.status==-2">毕业</text>
									<text data-details='tdSecond' v-show="item.status==-3">长假</text>
									<text data-details='tdSecond' v-show="item.status==-4">短假</text>
								</u-td>
							</view>
						</u-tr>
					</view>
				</u-checkbox-group>
			</u-table>
			<u-empty v-show="!isShowList" text="未找到该学生!" mode="favor" font-size="25" icon-size="150" margin-top="200">
			</u-empty>
		</view>
		<view style="line-height: 60rpx;text-align: center;color: #c8c9cc;padding-bottom: 40rpx;">{{loadMorePrompt}}
		</view>

		<!-- 弹出层 - 部门选择 - 文件选择 -->
		<u-popup v-model="show2">
			<u-navbar :is-back="false" :border-bottom="false" title="筛选要求" title-color="#fff" :title-size="40">
			</u-navbar>
			<!-- 全部按键 -->
			<view class="btnSet">
				<u-divider class="uDivider">级部</u-divider>
				<view class="popupView">
					<button v-for="(item,index) in levelOf" :key="item.id"
						:class="index===popupStatus.chooseId?'chooseButton':''"
						@click="btnPopup1(item,index)">{{item.title}}</button>
				</view>

				<u-divider class="uDivider">班级</u-divider>
				<view class="popupView">
					<button v-for="(item,index) in levelOfChildren" :key="item.id"
						:class="index===popupStatus.chooseId2?'chooseButton':''"
						@click="btnPopup2(item,index)">{{item.title}}</button>
				</view>
				<view v-if="levelOfChildren.length == 0" style="text-align: center;">请先选择班级！</view>

				<u-divider>学生搜索</u-divider>
				<view class="search">
					<u-input v-model="keyWord" :clearable="true" placeholder="请输入搜索内容" placeholder-style="paddingLeft:0"
						:custom-style="uInput1" :trim="true" />
					<u-button :disabled="isDisabled" @click="searchIcon">搜索</u-button>
				</view>

				<view class="subBtn">
					<button @click="resetBtn">重 置</button>
					<button @click="determine">确 认</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				studentList: [], //学生信息
				show: false, //下拉框的显示
				studentTotalNumber: 0, //学生总数
				list: [ //复选框 - 状态
					{
						value: '1',
						label: '在校'
					}, {
						value: '0',
						label: '休学'
					}, {
						value: '-1',
						label: '退学'
					}, {
						value: '-2',
						label: '毕业'
					}, {
						value: '-3',
						label: '长假'
					}, {
						value: '-4',
						label: '短假'
					},
				],

				keyWord: "", //输入框的值
				isShowList: true, //控制搜索为空时的显示模块
				uInput1: { //输入框的样式
					width: "80%",
					padding: "0 25rpx",
				},

				allPage: 0, //总页数
				page: 1, //当前页
				loadMorePrompt: '上拉加载更多...',
				checkBoxTrue: false, //是否激活复选框 - 及对复选框的操作显示区
				allChooseStudent: "", //复选框 所选择的

				show2: false, //左侧弹框 - 筛选
				refresh: false, // 顶部刷新动画开启
				levelOf: [],
				levelOfChildren: [],
				classesId: "", //班级id
				gradeId: "", //级部id
				popupStatus: { //审核人,上传人选中样式
					chooseId: '',
					chooseId2: '',
				},
				isDisabled: true, //控制搜索按钮的禁用与否
			}
		},
		methods: {
			goStudentDetails(e, id) { //跳转详情
				let tdSecond = e.target.dataset.details
				if (tdSecond === 'tdSecond') {
					uni.navigateTo({
						url: `./studentDetails?id=${id}`
					})
				}
			},
			callPhone(e, phoneNumber) { //拨打电话
				let tdThird = e.target.dataset.phonenumber
				if (tdThird == 'tdThird') {
					uni.makePhoneCall({
						phoneNumber: phoneNumber
					})
				}
			},
			changeStudentStatus(item) { //长按事件
				// console.log(item, '长按事件');
				this.checkBoxTrue = true
			},
			requestData() { //学生列表 - 接口
				uni.showLoading({
					title: '加载数据中...'
				})
				this.loadMorePrompt = '加载中...'
				this.$http(this.$api.studentList, {
					page: this.page,
					name: this.keyWord,
					classes_id: this.classesId, //班级
					grade_id: this.gradeId //级部
				}).then((res) => {
					this.studentTotalNumber = res.data.count
					uni.hideLoading()
					uni.showToast({
						title: "加载成功",
						icon: "none",
						duration: 800,
					})
					// 追加假字段
					const addField = []
					res.data.select.forEach(item => {
						addField.push({
							...item,
							isChecked: false
						})
					})
					// 总数/一页展示的个数
					this.allPage = Math.ceil(res.data.count / res.data.select.length)
					this.studentList = [...this.studentList, ...addField]

					// 级部
					this.levelOf = res.data.grade

					this.loadMorePrompt = '上拉加载更多...'
					if (this.studentList.length == '') {
						this.isShowList = false
					} else {
						this.isShowList = true
					}
					if (res.data.select.length <= res.data.count) {
						this.loadMorePrompt = '没有更多的学生了 ~~~'
					}
				})
				uni.stopPullDownRefresh()
			},
			confirm(e) { //动画后 - 状态下拉框选项 - 确认后回调事件
				// console.log(e[0].value, '动画后-下拉框选项');
				this.checkBoxTrue = false
				this.$http(this.$api.studentStatus, {
					id: this.allChooseStudent,
					status: e[0].value
				}).then((res) => {
					if (res.code == 0) {
						uni.showToast({
							title: "修改成功！",
							icon: "none"
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/myBackstage/student'
							})
						}, 800)
					} else {
						uni.showToast({
							title: "修改失败！",
							icon: "none"
						})
					}
				})
			},
			checkboxGroupChange(e) { //所有复选框 - 所选择的
				this.allChooseStudent = e.join(",")
				// console.log(this.allChooseStudent, 'Group');
			},
			btnPopup1(item, index) { //级部
				this.popupStatus.chooseId = index
				this.levelOfChildren = item.children //根据级部，改变班级
				this.gradeId = item.id
			},
			btnPopup2(item, index) { //班级
				this.popupStatus.chooseId2 = index
				this.classesId = item.id
			},
			resetEvent() {
				this.keyWord = ""
				this.classesId = ""
				this.gradeId = ""
				this.levelOfChildren = []
				this.popupStatus.chooseId = ''
				this.popupStatus.chooseId2 = ''
				this.studentList = []
				this.page = 1
			},
			resetBtn() { //弹框重置
				this.resetEvent()
				this.requestData()
			},
			determine() { //弹框确认
				this.studentList = []
				this.requestData()
				this.show2 = false
			},
			resetIcon() { //顶部刷新按钮
				this.resetEvent()
				this.refresh = true
				setTimeout(() => {
					this.requestData()
				}, 100)
			},
			searchIcon() { //弹框搜索按钮
				this.studentList = []
				this.requestData()
				this.show2 = false
			},
		},
		computed: {
			checkedAll() {
				return this.studentList.reduce((pre, current) => {
					return pre + (current.isChecked ? 1 : 0)
				}, 0)
			},
			uCheckboxAll: { //全选学生
				get() {
					return this.checkedAll === this.studentList.length && this.studentList.length > 0
				},
				set(newVal) {
					this.studentList.forEach((item) => {
						// console.log(newVal, item);
						item.isChecked = newVal
					})
				}
			}
		},
		onLoad() {
			this.requestData()
		},
		onPullDownRefresh() { //下拉刷新
			this.resetEvent()
			this.requestData()
		},
		onReachBottom() { //上拉加载更多
			if (this.page == this.allPage) return
			else this.page++;
			this.requestData()
		},
		watch: {
			keyWord() {
				if (this.keyWord != "") {
					this.isDisabled = false //启用搜索
				} else if (this.keyWord == "") {
					this.isDisabled = true //禁用搜索
				}
			}
		}
	}
</script>

<style lang="scss">
	/* 点击 弹出左侧模块 */
	.btnSet {
		height: calc(100vh - 170rpx);
		padding: 10px;
		width: 500rpx;
		position: relative;
	}

	.popupView {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap
	}

	.popupView>button {
		color: #82848a;
		width: 48%;
		margin: 0;
		margin-bottom: 10px;
		background-color: #f4f4f5;
	}

	.popupView>button,
	.subBtn>button {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 25rpx;
	}

	.u-divider {
		/* 分割线 */
		margin: 20px 0 !important;
	}

	.uDivider .u-divider:first-child {
		margin-top: 0px !important;
	}

	.chooseButton {
		/* 按钮被选中后的样式 */
		background: linear-gradient(to right, #9C6CEE, #78AAE8) !important;
		color: #fff !important;
	}

	.subBtn {
		/* 弹出框底部 重置确认按键 */
		display: flex;
		justify-content: space-between;
		padding: 15rpx;
		margin-top: 100rpx;
	}

	.subBtn>button {
		width: 45%;
		padding: 2rpx 0;
	}

	.subBtn>button:last-child {
		color: #fff;
		background: linear-gradient(to right, #9C6CEE, #78AAE8);
	}

	.resetIconRotate {
		/* 刷新功能*/
		transition: all 1s;
		transform: rotate(720deg);
	}

	/* ~~~~~~~~~~~~~~~~~~~~~~~~~ */

	/* 长按后对复选框操作的样式 及 动画 */
	.status-div {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 0;
		opacity: 0;
	}

	.start-animation {
		animation: animation-show 0.3s;
		animation-fill-mode: both;
	}

	.end-animation {
		animation: animation-show2 0.3s;
		animation-fill-mode: both;
	}

	@keyframes animation-show {
		from {
			height: 0;
			opacity: 0;
		}

		to {
			height: 60rpx;
			opacity: 1;
		}
	}

	@keyframes animation-show2 {
		from {

			height: 60rpx;
			opacity: 1;
		}

		to {
			height: 0;
			opacity: 0;
		}
	}

	/* 显示后复选框不局中问题 */
	u-checkbox>view>view {
		margin-left: 25rpx;
	}

	.status-div u-button>button {
		border: none !important;
		font-size: 28rpx !important;
	}

	/* 搜索框 */
	.searchView {
		padding: 20rpx 40rpx;
		box-shadow: 0 0 5px #c8c9cc;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.search {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #cccccc52;
		border-radius: 15px;
		overflow: hidden;
		height: 60rpx;
		line-height: 60rpx;
		width: 100%;
	}

	u-input {
		width: 78%;
	}

	.search u-button {
		width: 20%;
	}

	.search button {
		display: block;
		color: #fff !important;
		font-size: 25rpx !important;
		background: linear-gradient(to right, #9C6CEE, #78AAE8) !important;
	}

	/* 表格 */
	.uTable {
		margin: 20rpx;
		margin-top: 90rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.uTable>view:first-child {
		line-height: 80rpx;

		text {
			font-weight: 900;
			font-size: 35rpx;
			margin-right: 10rpx;
		}
	}

	.u-tr {
		line-height: 50rpx;
		align-items: stretch !important;
	}

	.u-tr>.u-th:first-child {
		flex: none;
		width: 13%;
	}

	.u-tr>.u-td:first-child {
		flex: none;
		width: 13%;
	}

	.u-tr>.u-th:nth-child(2) {
		flex: none;
		width: 37%;
	}

	.u-tr>.u-td:nth-child(2) {
		flex: none;
		width: 37%;
	}

	.u-tr>.u-th:nth-child(3) {
		flex: none;
		width: 35%;
	}

	.u-tr>.u-td:nth-child(3) {
		flex: none;
		width: 35%;
	}

	.u-td {
		height: auto;
		width: 100%;
	}

	.input-checkBox {
		/* 多选框样式 */
		text-align: center;
	}
</style>
